<template>
  <div id="shortcut-menu-list">
    <el-tabs v-model="editableTabsValue"  @tab-remove="removeTab">
      <el-tab-pane :name="defaultActiveName" label="快捷菜单列表">
        <el-button-group style="margin-bottom: 7px;float: left;">
        </el-button-group>
        <div class="menu" :key="o.id" v-for="o in baseDto.lstDto">
          <el-tooltip class="item" effect="dark" content="删除快捷菜单" placement="top">
            <li class="el-icon-close" style="float: right;font-size: 18px;color: #848891;" @click="deleteById(o.id)"></li>
          </el-tooltip>
          <a class="menu-link" @click="toUrl(o.url)">
            <p class="menu-box">
              <img class="menu-icon" src="../../../../static/icon/menu/临时图片.png">
              <span class="menu-text">{{o.name}}</span>
            </p>
          </a>
        </div>
        <div class="menu" @click="create()">
          <a class="menu-link">
            <p class="menu-box">
              <img class="menu-icon" src="../../../../static/icon/menu/添加菜单.png">
              <span class="menu-text">添加菜单</span>
            </p>
          </a>
        </div>
      </el-tab-pane>
      <el-tab-pane
        v-for="(item) in editableTabs"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        closable>
        <shortcut-menu-create v-if="item.key == 'create'"></shortcut-menu-create>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Vue from 'vue'
import ShortcutMenuCreate from './shortcut-menu-create'

export default {
  name: 'shortcut-menu-list',
  components: {
    ShortcutMenuCreate
  },
  data () {
    return {
      searchModel: {
        pageDto: {pageSize: 100, pageNum: 1, pageSizes: [20, 100]}
      },
      baseDto: {page: {total: 0}},
      defaultActiveName: 'UserList',
      editableTabsValue: 'UserList',
      editableTabs: [],
      tabIndex: 2
    }
  },
  created: function () {
    this.listPage()
  },
  methods: {
    listPage: function () {
      this.loading = true
      Vue.$ajax({
        method: 'post',
        url: Vue.$adminServerURL + '/web/ShortcutMenuController/listPage',
        data: this.searchModel
      }).then(res => {
        this.loading = false
        if (res.data.flag === 'SUCCESS') {
          this.baseDto = res.data
        } else {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        }
      })
    },
    create: function () {
      this.addTab('添加快捷菜单', 'CreateShortcutMenu', 'create')
    },
    deleteById: function (id) {
      this.$confirm('您确定删除该记录吗？', '询问', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Vue.$ajax({
          method: 'delete',
          url: Vue.$adminServerURL + '/web/ShortcutMenuController/' + id
        }).then(res => {
          if (res.data.flag !== 'SUCCESS') {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          } else {
            this.$message({
              message: res.data.message,
              type: 'success'
            })
            this.listPage()
          }
        })
      }).catch(() => {
      })
    },
    toUrl: function (url) {
      this.$router.push({path: url})
    },
    addTab: function (label, name, key) {
      let ele = {label: label, name: name, key: key}
      let flag = false

      for (let i = 0; i < this.editableTabs.length; i++) {
        let var1 = this.editableTabs[i]
        if (var1.name === name) {
          flag = true
          break
        }
      }

      if (!flag) {
        this.editableTabs.push(ele)
      }
      this.editableTabsValue = name
    },
    removeTab: function (targetName) {
      let tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            } else {
              activeName = this.defaultActiveName
              this.listPage()
            }
          }
        })
      }

      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter(tab => tab.name !== targetName)
    }
  }
}
</script>
<style>
  #shortcut-menu-list .menu {
    display: block;
    width: 16.66666667%;
    float: left;
    flex: 0 0 auto;
    padding-left: 12px;
    padding-right: 12px;
  }

  #shortcut-menu-list .menu-link {
    display: block;
    width: 100%;
    padding: 10% 0;
    margin-bottom: 24px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    background: #F5F7FA;
    color: #666;
    text-decoration: none;
    cursor:pointer;
  }

  #shortcut-menu-list .menu-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 52%;
    min-width: 142px;
    margin: auto;
  }

  #shortcut-menu-list .menu-box .menu-icon {
    display: block;
    width: 45px;
    height: 45px;
  }

  #shortcut-menu-list .menu-link .menu-text {
    padding: 0 12px;
  }
</style>
